import React, { useEffect } from "react";
import Icon from "@ct0/icons";

const IconItem = ({ children, name }) => {
  return (
    <li
      style={{
        display: "flex",
        flexDirection: "column",
        width: "15%",
        height: "50px",
        alignItems: "center",
      }}
    >
      {children}
      <span>{name}</span>
    </li>
  );
};

export default function IconPanel() {
  return (
    <div>
      <h2>Icon 图标</h2>
      <ul>
        <li>使用图标组件，需要安装 @ct0/icons 图标组件包</li>
      </ul>
      <h2>使用</h2>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            {`import { Add } from '@ct0/icons'`}
            {"\n"}
            {`ReactDOM.render( <Add />, mountNode)`}
            {"\n"}
          </code>
        </pre>
      </div>
      <h2>图标列表</h2>
      <ul>
        <li>方向类图标</li>
      </ul>
      <ul style={{ display: "flex", flexWrap: "wrap" }}>
        <IconItem name="CaretDown">
          <Icon.CaretDown style={{ color: "red" }} />
        </IconItem>
        <IconItem name="Run">
          <Icon.Run />
        </IconItem>
        <IconItem name="Pointingarrow">
          <Icon.Pointingarrow />
        </IconItem>
        <IconItem name="Arrow">
          <Icon.Arrow />
        </IconItem>
        <IconItem name="Expand">
          <Icon.Expand />
        </IconItem>
        <IconItem name="Download">
          <Icon.Download />
        </IconItem>
        <IconItem name="Upload">
          <Icon.Upload />
        </IconItem>
        <IconItem name="Upload1">
          <Icon.Upload1 />
        </IconItem>
      </ul>
      <ul>
        <li>编辑操作类图标</li>
      </ul>
      <ul style={{ display: "flex", flexWrap: "wrap" }}>
        <IconItem name="Add">
          <Icon.Add />
        </IconItem>
        <IconItem name="Remove">
          <Icon.Remove />
        </IconItem>
        <IconItem name="Delete">
          <Icon.Delete />
        </IconItem>
        <IconItem name="Ignore">
          <Icon.Ignore />
        </IconItem>
        <IconItem name="Close">
          <Icon.Close />
        </IconItem>
        <IconItem name="Edit">
          <Icon.Edit />
        </IconItem>
        <IconItem name="Eye">
          <Icon.Eye />
        </IconItem>
        <IconItem name="Setting">
          <Icon.Setting />
        </IconItem>
        <IconItem name="Export">
          <Icon.Export />
        </IconItem>
        <IconItem name="Drag">
          <Icon.Drag />
        </IconItem>
        <IconItem name="Reboot">
          <Icon.Reboot />
        </IconItem>
        <IconItem name="Refresh">
          <Icon.Refresh />
        </IconItem>
        <IconItem name="Searchfor">
          <Icon.Searchfor />
        </IconItem>
        <IconItem name="Copy">
          <Icon.Copy />
        </IconItem>
        <IconItem name="Stop">
          <Icon.Stop />
        </IconItem>
      </ul>
      <ul>
        <li>其他类型图标</li>
      </ul>
      <ul style={{ display: "flex", flexWrap: "wrap" }}>
        <IconItem name="Unlock">
          <Icon.Unlock />
        </IconItem>
        <IconItem name="List">
          <Icon.List />
        </IconItem>
        <IconItem name="Details">
          <Icon.Details />
        </IconItem>
        <IconItem name="Detailslist">
          <Icon.Detailslist />
        </IconItem>
        <IconItem name="Sidebarshrink">
          <Icon.Sidebarshrink />
        </IconItem>
        <IconItem name="More">
          <Icon.More />
        </IconItem>
        <IconItem name="Tracecleanup">
          <Icon.Tracecleanup />
        </IconItem>
        <IconItem name="Kuozhan">
          <Icon.Kuozhan />
        </IconItem>
        <IconItem name="Waring">
          <Icon.Waring />
        </IconItem>
        <IconItem name="Help">
          <Icon.Help />
        </IconItem>
        <IconItem name="Info">
          <Icon.Info />
        </IconItem>
        <IconItem name="CheckCircle">
          <Icon.CheckCircle />
        </IconItem>
        <IconItem name="Hot">
          <Icon.Hot />
        </IconItem>
        <IconItem name="Notequalto">
          <Icon.Notequalto />
        </IconItem>
        <IconItem name="Dangerwarning">
          <Icon.Dangerwarning />
        </IconItem>
        <IconItem name="Protective">
          <Icon.Protective />
        </IconItem>
        <IconItem name="Alarmdisposed">
          <Icon.Alarmdisposed />
        </IconItem>
        <IconItem name="Archive">
          <Icon.Archive />
        </IconItem>
        <IconItem name="Calendar">
          <Icon.Calendar />
        </IconItem>
        <IconItem name="Judge">
          <Icon.Judge />
        </IconItem>
        <IconItem name="System">
          <Icon.System />
        </IconItem>
        <IconItem name="Url">
          <Icon.Url />
        </IconItem>
      </ul>
    </div>
  );
}
